<template>
  <div class="infoWrapper">
    <div class="info">
      <div class="left">
        <div style="display: flex; margin-bottom: 10px">
          <div class="infoItem">
            <span>itemType：</span>
            <el-select
              v-model="itemType.activeItem"
              placeholder="itemType"
              style="width: 200px"
              filterable
            >
              <el-option
                v-for="item in itemType.data"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <div class="infoItem">
            共<span>{{ instructSum }}</span
            >条指令
          </div>
        </div>
      </div>

      <div class="right">
        <el-input
          v-model="searchInstructStr"
          placeholder="按指令名称"
          class="input infoItem"
          clearable
          @keyup.enter.native="searchInstruct"
          @clear="searchInstruct"
        >
          <template #append>
            <el-button :icon="Search" @click="searchInstruct" />
          </template>
        </el-input>
      </div>
    </div>

    <div class="content">
      <slot
        :tableData="tableData"
        :deleteInstructs="deleteInstructs"
        :remarkInstructs="remarkInstructs"
        :refresh="refresh"
      ></slot>
    </div>
  </div>
</template>

<script setup>
import {
  api_deleteRelearn,
  api_queryAllSchoolItemBySchoolId,
  api_remarkRelearn,
} from "@/api/manage";
import { Search } from "@element-plus/icons-vue";
import { ElLoading, ElMessage } from "element-plus";
import { reactive, ref, watch } from "vue";

const props = defineProps({
  openDraw: Function,
  lastDownloadTime: String,
});

const itemType = reactive({
  data: [
    {
      value: "-1",
      label: "全部",
    },
    {
      value: "1",
      label: "班级",
    },
    {
      value: "2",
      label: "年级",
    },
    {
      value: "3",
      label: "楼宇区域",
    },
    {
      value: "4",
      label: "教室",
    },
  ],
  activeItem: "-1",
});

const instructSum = ref(0);
const searchInstructStr = ref(""); //输入框搜索
const originTableData = ref([]);
const tableData = ref([]);

const refresh = async () => {
  fetchInstruct({});
};

const updateBert = (item) => {
  tableData.value?.forEach((instruct) => {
    if (instruct.instructCode === item.instructCode) {
      instruct.domain = item.domain;
      instruct.intent = item.intent;
      instruct.slot = item.slot;
    }
  });
};

defineExpose({ refresh, updateBert });

/**
 * 输入框搜索
 */
const searchInstruct = () => {
  fetchInstruct({});
};

const fetchInstruct = async (d) => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "transparent",
  });

  // 其它筛选条件
  d.itemType = d.itemType || itemType.activeItem;

  if (d.itemType === "-1") {
    delete d.itemType;
  }

  try {
    const { data, success, msg } = await api_queryAllSchoolItemBySchoolId({
      ...d,
    });
    if (!success) {
      throw new Error("获取指令失败,接口返回:" + msg);
    }
    originTableData.value = data;
    tableData.value = data;
    let sum = data.length;

    instructSum.value = sum;
  } catch (e) {
    ElMessage.error("获取数据失败");
  }

  loading.close();
};

const deleteInstructs = async (index, row) => {
  const r = await api_deleteRelearn({
    id: row.id,
    schoolId: row.schoolId,
  });

  if (r.success === true) {
    ElMessage.success(`删除成功`);
    fetchInstruct({});
  } else {
    ElMessage.error(`${row.userQuestion}删除失败,接口返回:${r.msg}`);
  }
};

const remarkInstructs = async (index, row) => {
  const r = await api_remarkRelearn({
    id: row.id,
    remark: row.remark,
  });

  if (r.success === true) {
    ElMessage.success(`备注成功`);
    fetchInstruct({});
  } else {
    ElMessage.error(`备注失败,接口返回:${r.msg}`);
  }
};

const emits = defineEmits(["visibleChange"]);

watch(
  () => itemType.activeItem,
  (newVal, b) => {
    fetchInstruct({});
  }
);
</script>

<style lang="scss" scoped>
.infoWrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  .info {
    margin: 15px 30px;
    display: flex;
    justify-content: space-between;
    :deep(.el-select) {
      width: 130px;
    }
    .infoItem {
      display: flex;
      align-items: center;
    }
    .infoItem + .infoItem {
      margin-left: 20px;
    }
    .left {
      display: flex;
      flex-direction: column;

      font-weight: 600;
      font-size: 17px;
      color: #555555;
    }
    .right {
      display: flex;
      align-items: flex-start;
      .input {
        width: 350px;
        margin-right: 5px;
      }
      .createBtn {
      }
    }
  }
  .content {
    flex: 1;
    min-height: 0;
  }
}
</style>
